<template>
  <div class="container calendar">
    <el-calendar v-loading="loading">
      <template #dateCell="{ date, data }">
        <div class="calendar-item" @click="handleClickDay(data.day)">
          <p>{{ data.day.split('-').slice(2).join('-') }}</p>
          <div v-for="item in checkDateMatch(data.day)" :key="item.id">
            <p style="margin: 0 0 4px;">{{ item.growthCycle }}</p>
            <p style="margin: 0 0 4px;">{{ item.event }}</p>
            <p style="margin: 0 0 4px;">{{ item.recommend }}</p>
          </div>
        </div>
      </template>
    </el-calendar>
    <el-dialog title="农作物数据" :visible.sync="visible" @closed="handleClose">
      <el-descriptions
        class="margin-top"
        :column="3" size=""
        border
        v-for="(item, index) in tableList"
        :key="index"
      >
        <el-descriptions-item>
          <template slot="label">
            种植日期
          </template>
          {{ item.plantingDate }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            作物类型
          </template>
          {{ item.cropsType }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            生长周期
          </template>
          {{ item.growthCycle }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            记录事件
          </template>
          {{ item.event }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            城市ID
          </template>
          {{ item.cityid }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            备注
          </template>
          {{ item.remark }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            建议
          </template>
          {{ item.suggest }}
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>
<script>
import {getCropData} from "@/api/business/weather";

export default {
  data() {
    return {
      visible: false,
      popoverContent: {},
      timer: null,
      list: [],
      tableList: [],
      loading: false
    };
  },
  watch: {
    visible: function (val) {
      // console.log(val)
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    // dialog关闭
    handleClose(){
      this.tableList = []
    },
    // 点击判断当前日期是否在列表中
    handleClickDay(date) {
      if (this.handleCheckDay(date)) {
        this.loading = true
        this.getViewerData(date)
      }
    },
    // 获取dialog的数据
    getViewerData(date) {
      getCropData().then(res => {
        res.forEach(item => {
          if (date === item.plantingDate){
            this.tableList.push(item)
          }
        })
        console.log(this.tableList,'this.tableList')
        this.loading = false
        this.visible = true
      })
    },
    // 获取日历上的数据
    getList() {
      getCropData().then(res => {
        this.list = res
      })
    },
    // 检查日期是否匹配
    checkDateMatch(date) {
      let dateStr = new Date(date).getTime();
      for (let item of this.list) {
        if (dateStr === new Date(item.plantingDate.substring(0, 10)).getTime()) {
          console.log(item,'itemitem')
          return [item];
        }
      }
    },
    // 返回检查日期的布尔值
    handleCheckDay(date) {
      let dateStr = new Date(date).getTime();
      const matchedItem = this.list.find(item =>
        dateStr === new Date(item.plantingDate.substring(0, 10)).getTime()
      );
      return matchedItem;
    },
  },
}
</script>

<style lang="scss">

.calendar {
  .el-calendar-table .el-calendar-day {
    height: 140px;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0;

    span {
      display: inline-block;
      width: 100%;
      height: 100%;
    }
  }
}

</style>

<style scoped lang="scss">

::v-deep .el-dialog__body{
  padding: 0 20px 20px;
}
::v-deep .el-descriptions{
  margin-top: 10px;
}

.calendar-item {
  display: inline-block;
  width: 100%;
  height: 100%;
  padding: 8px;
}
</style>
